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jb 0 J 6JJ lSJ^ 
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■ CS-^ 
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P 
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Color: 
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OJtH 
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{ 

Color:red; 
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(jj| Jj oJ <jLaj ^ ^ Jjj 

. U cs^ 




jlj^ ^ Aj jAitjJ aJ jU a£ AjjLui I^J jU a1 ^JJ^ ^JJ^ j lAj^ Jj 
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I e^ljjjx ^ Aj Ljl^)£ aj Aj j Ij aI ^ aJ ^^jx Aj^^xj ^ 


Ajjxj 
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<head> 
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<body> 


<p style="color:red;">u^-^jj^</p> 


</body> 
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.htm 

.html 
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<html> 

<head> 

</head> 

<body> 

<div style="color:yellow;">u^'^ jj^</div> 

</body> 

</html> 


<J 



Aj AjL«^ ^ Aj 0^ . (jj A^ AjLa^ ^ Aj Aj ^ Aj Ia aj ^ AA aj 

\ Aj^j-aj (Jjl-aj_jA a j Ajui (_g-ki Aj jlj aI 


<html> 

<head> 


AjLaj ^ Aj ^UjA jl£ Aj Aj Aj A^Ij a£ aJ a£Ij j Aj ajjl 

</head> 

<body> 

</body> 

</html> 
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<html> 

<head> 

<style type="text/css"> 

</style> 

</head> 

<body> 

</body> 

</html> 
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AjLdj ^ Aj jl£ 


<J 


^ (Jj ^ A£ C5^ ^ 


<html> 

<head> 

<style type="text/css"> 

P 

{ 

Color:blue; 
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</style> 

</head> 

<body> 
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</body> 

</html> 






O C5^ '^3 


<html> 

<head> 

<style type="text/css"> 

P 

{ 

Color:blue; 

} 

div 

{ 

colorired; 
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<body> 
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</body> 

</html> 
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_ .css 

AA L>^ C5^ <J Aj ^Ij (^ J ^ J cJ:J^ 

. ^ J eJilja 'Lj jU <] JjjJ 
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Css _ 
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Ajoj a1 L)^ is^ C5^^ C5^^ aSs^j^ ^ 3^ Aj c^I^Ij (JjLcj jU aJ 

: O'^ ^ 03 ^ j 


<htnnl> 

<head> 


15 


































<link rel ="stylesheet" type="text/css" href="style.css" /> 

</head> 

<body> 

<p>jijj£ ^ ^</p> 

</body> 

</html> 


. jA jlj JJ 


■ J ^ jlj aJ A^ Aiali ^ AA A^^ Ajoi 


O indE^ 

6/3/2012 12:03 

Chrome HTML Do... 

1 KB 

^ style 

6/3/2012 12:03 

Cascading Style S... 

1 KB 


Ail^)£ aj Aj a^ cJ:3^^^ ^ Aiali j Aj ' '< * ■' ;*< 

. ojj-iJ^ u'-^J^'^ L>-^ L>4^ ls^ jU Aj a£ ^ A^ aj J Aj 




^ j'j^ OJJ^W aj AjU j ^ Aj ^ JJJ cs^JJ ^ Ax Aj 

. f C5 j'j^ 
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www.voutube.com/computersoranu 




AjILo jIj a 1 <j( J (j^^ Aj ^ (J:J AjIjLg^ j Aj Aj ^ 


color 


(jLo^ (J^ Ajjjoj ^ ^ Aj ^^ Aj 


\ Aj 


<html> 

<head> 

<style type="text/css"> 

P 

{ 

color:gray; 

} 

</style> 
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</head> 

<body> 

<p> </p> 

</body> 

</html> 






Font-family 

6jlA jIj ^Lajl£ Jj <j ^ Aj 


<j 


<html> 

<head> 

<style type="text/css"> 

P 

{ 

font-family:impact; 

} 

</style> 

</head> 

<body> 

<p> </p> 

</body> 

</html> 
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Font-size 

j lSJJ^ ^ (J^ Ajjjoj^ ^ ^ AjLo^ ^ Aj ^Aj 

: ^ 03 ^ L?^jj^ 

<html> 

<head> 

<style type="text/css"> 

P 

{ 

font-size:33px; 

} 

</style> 

</head> 

<body> 

<p> </p> 

</body> 

</html> 
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C CS^W "'J U oj j AA oj 


Large 


Small 


x-large 


x-small 


; Aj 


<html> 

<head> 

<style type="text/css"> 


P 

{ 

font-size:x-small; 

} 


</style> 

</head> 

<body> 

<P> </p> 

</body> 

</html> 
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Text-align 


jj Cluj ail j a£ Aj Aj lS lSJ ^^^ AjLo^ ^ Aj 

jl£ Aj AjLo^ j Aj Ij Aj CLlojIj 6jIj ^Ij A^ ^Ij j ( j ^ jj ^ ^ 


Aj 


cLlojIJ djU Jj 


<html> 

<head> 

<style type="text/css"> 

P 

{ 

text-align:center; 

} 

</style> 

</head> 

<body> 

<p> </p> 

</body> 

</html> 
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; Cliujlj ^ 


<html> 

<head> 

<style type="text/css"> 


P 

{ 

text-align:right; 

} 


</style> 

</head> 

<body> 

<p> </p> 

</body> 

</html> 

! Aj 


<html> 

<head> 

<style type="text/css"> 


P 

{ 















text-align:left; 

} 

</style> 

</head> 

<body> 

<p> 

</body> 

</html> 


Blue.dana66@yahoo.com 

Dana.computer92@gmail.com 


T ext-transform 


aJ 1 j eJ oj AjL«^ ^ Aj ^ Aj Aj AA AjL«^ a1 A^^ Aj AjL«^ ^ Aj 

Csi ^ ^ AjIj (JIj^ a£ Aj Aj Ajjoj J AA J Ajoj ^ AiijaJ^ 

AA ^Ij a£j j 6jj a£ ^ Aj ^l£ Aj^ jj^ AA a£ ^ a£j Ij jj ^Ij CjI£j 

UJ ^ J ‘^JJ^ L$ ^ 


capitalize 


dil^j ^ CLloi eJ ajj a£ ^ ^ Ajujj j AA ^Ij e j Ajoi a£ l1iI£ a.i 1 j AjLa^ ^ Aj 


I Aj 


<html> 

<head> 
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<style type="text/css"> 


P 

{ 

text-transform:capitalize; 

} 


</style> 

</head> 

<body> 

<p> we are strong </p> 
</body> 
</html> 


We Are Strong 


uppercase 

aa a£ ^ a£j ^Lajl£ Aj^jj a] I j jj 

AjLg^ ^ Aj ^ Aj Ia 6 j j AA 6j 

CjIaj 6jj a£ ^ Aj 


; Aj 


<html> 

<head> 

<style type="text/css"> 


P 

{ 

text-transform:uppercase; 

} 
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</style> 

</head> 

<body> 

<p> we are strong </p> 
</body> 
</html> 

\VE ARE STRONG 


loweracase 


0 0 ^^ 




<html> 

<head> 

<style type="text/css"> 

P 

{ 

text-transform:lowercase; 

} 

</style> 
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</head> 

<body> 

<p> WE ARE STRONG </p> 

</body> 

_ </html> 

we are strong 


Text-decoration 


llj^ fijU Aj ^ A£j Ij jJ AjI j Aj ^ Aj 

: ^ ls ch (j ‘>j ® j^j ^ 


none 

^ AA aJ Aj aS A^L« ^ IjIj ^LaSlil ^ aS Aj aS lIjIS 1 j AjLa^ ^ Aj 

■ dyj ^ AjLa^ ^ Aj jA Aj 


Aj^jxj 


<html> 

<head> 

<style type="text/css"> 

a 

{ 
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text-decoration :none; 

} 

</style> 

</head> 

<body> 

<a href="http://www.sul.eu5.org/"> sul.eu5.org </a> 

</body> 

</html> 




sul.eu5.org 


underline 


^3 ^ cly AjJjoj^ aJI j ^ Aj ^Aj 


; <j 


<html> 

<head> 

<style type="text/css"> 

P 

{ 

text-decoration :underline; 

} 

</style> 

</head> 

<body> 
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<p>u^^jj^</p> 

</body> 

</html> 





overline 




<html> 

<head> 

<style type="text/css"> 

P 

{ 

text-decoration:overline; 

} 

</style> 

</head> 

<body> 

<p>u^^jj^</p> 

</body> 

</html> 
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Line-through 


J Ajjjoj ^ j ^ (J^ ^ Aj ^^ Aj 


; <j 


<html> 

<head> 

<style type="text/css"> 


{ 

text-decoration :line-through; 

} 

</style> 

</head> 

<body> 

<p>u^^jj^</p> 

</body> 

</html> 


<j 
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Text-indent 


aJ 1 j eJ oj AjL«^ ^ Aj ^ Aj Ajui^t^ AjL«^ a1 A^^ Aj AjL*^ ^ Aj 

(.g-^ ^ cstJ^3^ ‘ ^ U:J U^ ^ 

; Ajjaj a£ Aj^jj ^lAjLi^ Aj l1iI£j CLlui l1iI£ j Aj ^ aAj ^ ^ AjIj 


<html> 

<head> 

<style type="text/css"> 

P 

{ 

text-indent:23%; 

} 

</style> 

</head> 

<body> 

<p>u^^jj^</p> 


</body> 

</html> 


! ^ 

/ ^ 

jUjJjjS 



ojljj ^ diui l1iI£ j Aj ajjjjjjA Aj Oi^ 
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Font-Style 

AA ^ a£ ^l£ lS^ ^ ^ a 1 Aj ^ Aj 

4j 

#♦ 

italic 

6j AjI£ AijjaJ^ Aj 

I <J 


<html> 

<head> 

<style type="text/css"> 


{ 

font-style:italic; 


} 


</style> 

</head> 

<body> 

<p>u^^jj^</p> 

</body> 

</html> 


aL^ 4 j 



oblique 
















<html> 

<head> 

<style type="text/css"> 

P 

{ 

font-style:oblique; 

} 

</style> 

</head> 

<body> 

<p>hy</p> 

</body> 

</html> 


Word-spacing 


^ j <J Jj AjIj (jljjj ^ ^ AjLajS ^ Aj 

CjIj oJ AjLajS ^ Aj CjIujjjjj Ij Aj clu a£j jjj J J 


; <j 


<html> 

<head> 

<style type="text/css"> 

P 
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{ 

word-spacing:30px; 

} 

</style> 

</head> 

<body> 

<P>(jllalJjj£ J1 jj£ jllalJljj£ </p> 

</body> 

_ </html> 


Letter-spacing 


a^lj Aj eJ AjI j ^ Aj AjL«^ ^ Aj 

>j A^j aIj jjjJ ^ ^ C5JJj 




<html> 

<head> 

<style type="text/css"> 

P 

{ 

letter-spacing:30px; 
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} 


</style> 

</head> 

<body> 

<p>yliu)jjj£ jjj£ jliuojjj£ </p> 

</body> 

</html> 


jIj^jjj^ 



background 

Ajjj eJ Ia ej j AA ej Ajjl^ oj^ Aj (_5Lj ej (_g-iLjb Jj l1ijJjI£ Aj ^ Aj 
a£ (jj a£j ^ c^Ij (j^pljj 6 j a£ j ^ ^ cly cj^ 

! jj lSJ^ ^j ^ (j^ ^j 


Background-color 

L_fll^)£ 6J ^ ^Lj ^ a£j ^(jLo 6 j Aj]Lg Lj (J^I ^ Aj ^Aj 

I Aj 
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Ul^ 


<html> 

<head> 

<style type="text/css"> 

P 

{ 

background-coloriblue; 

} 

</style> 

</head> 

<body> 

<P>(jllalJjj£ J1 jj£ jllalJljj£ </p> 

</body> 

_ </html> 



LS^‘^ 


<html> 

<head> 

<style type="text/css"> 

body 

{ 

background-coloripink; 

} 
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</style> 

</head> 

<body> 

<P>(jllalJjj£ J1 jj£ jllalJljj£ </p> 

</body> 

</html> 





Background-iamge 


Cljjj AIL CL a£ j AA jIAj ^ a£j A^j (J^IjJ fiC AjLg^ ^ Aj ^JA Aj 


I Aj 


<html> 

<head> 

<style type="text/css"> 

body 

{ 

background-image:url(t^'-i 
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} 

</style> 

</head> 

<body> 

<p>yliu)jjj£ jjj£ jliuojjj£ </p> 

</body> 

</html> 


I Aj 


<html> 

<head> 

<style type="text/css"> 


body 

{ 

background-image:url(http://a6.sphotos.ak.fbcdn.net/hphotos-ak- 

snc7/s320x320/578155_116644348476527_1909924797_n.jpg); 

} 


</style> 

</head> 

<body> 

<P>ylluoJjj£ Jjj£ jlluoJjj£ </p> 

</body> 

</html> 
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Ul^ 



JjjS jlILiJi j_j£ 

HTML language 

UU^nV<0*>)>*JUU 


HTML language 

UU^NVAi*^>MUU 


HTML language 

wT'^j 




HTML language 

j-‘jA j 

^ »jU vj 


HTML language 

jA >>-“ j •V 

bU J 'SV aS *y *iU u 


HTML language 

>'-• j ■V 

liU Ai*y>S*JUVi 


Background-repeat 

Aj ^ C)i ^ j a 1 Ij oJ Ajix^^ j Aj Aj 

6 j AliL 


JjujU (^ 0 J^ <J 6J A£j J ^ ^ 


; <j 


<html> 

<head> 

<style type="text/css"> 


body 

{ 

background-image:url(http://a6.sphotos.ak.fbcdn.net/hphotos-ak- 

snc7/s320x320/578155_116644348476527_1909924797_n.jpg); 

background-repeat:repeat-x; 

} 

</style> 

</head> 
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<body> 

<P>(jllalJjj£ J1 jj£ jllalJljj£ </p> 

</body> 

</html> 



;LLjjjjS Jjj£ 






HTML language 


HTML language 


HTML language 
















UU^NV^.,l>wU\i 











<html> 

<head> 

<style type="text/css"> 


body 

{ 

background-image:url(http://a6.sphotos.ak.fbcdn.net/hphotos-ak- 

snc7/s320x320/578155_116644348476527_1909924797_n.jpg); 

background-repeat:repeat-x; 

} 

</style> 
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</head> 

<body> 

<p>yliu)jjj£ jjj£ jliuojjj£ </p> 

</body> 

_ </html> 



Oj <J 6J ^ ^ ^J 




<html> 

<head> 

<style type="text/css"> 


body 

{ 

background-image:url(http://a6.sphotos.ak.fbcdn.net/hphotos-ak- 

snc7/s320x320/578155_116644348476527_1909924797_n.jpg); 

background-repeat:no-repeat; 

} 


</style> 

</head> 

<body> 
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Css language 


Ul^ 


<P>ylluoJjj£ Jjj£ jlluoJjj£ </p> 

</body> 

</html> 



oj ^ u ‘ *' LS ''ji ^ ^ AjLttJ ^ Aj ej 


<html> 

<head> 

<style type="text/css"> 

body 

{ 

background-image:url(http://a6.sphotos.ak.fbcdn.net/hphotos-ak- 

snc7/s320x320/578155_116644348476527_1909924797_n.jpg); 

background-repeat:repeat-x,y; 

} 

</style> 

</head> 

<body> 

<P>ylluoJjj£ Jjj£ jlluoJjj£ </p> 

</body> 


















Css language 


Ul^ 


</html> 


J 

1—ITIVII— language 


1—ITIS/1I_ language 


HTIVl 






1—ITIVll— language 


1—ITIVIL language 


HTIVI 





1 _ 1 

M 

1 _ 1 

11 _ 


Background-position 


Aj AjLg Aj j Aj ^xLoj Aj A^ ^ a£j (jLo A^ ^ Ij 
CLlojIj 6jIj ^Ij CLlojIj a1 ^Ij l-J A^ a1 a£j (J^ ^ ^^IL<a 


; <j 


<style type="text/css"> 

body 

{ 

background-image:url(http://a6.sphotos.ak.fbcdn.net/hphotos-ak- 

snc7/s320x320/578155_116644348476527_1909924797_n.jpg); 

background-repeat:no-repeat; 
background-position :center; 

} 

</style> 

</head> 

<body> 

<p>yliu)jjj£ jjj£ jliuojjj£ </p> 

</body> 
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Css language 


</html> 





b V "4^ 03 ti'j 0^ OJ 

; Aj 

:SrJ ^ o'^of 


<html> 

<head> 

<style type="text/css"> 

body 

{ 

background-image:url(http://a6.sphotos.ak.fbcdn.net/hphotos-ak- 

snc7/s320x320/578155_116644348476527_1909924797_n.jpg); 

background-repeat:no-repeat; 
background-position :left; 

} 

</style> 

</head> 

<body> 

<P> jlluoJjj£ Jjj£ jlluoJjj£ </p> 

</body> 

</html> 
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ICLloiIj Jj 

<html> 

<head> 

<style type="text/css"> 

body 

{ 

background-image:url(http://a6.sphotos.ak.fbcdn.net/hphotos-ak- 

snc7/s320x320/578155_116644348476527_1909924797_n.jpg); 

background-repeat:no-repeat; 
background-position :right; 

} 

</style> 

</head> 

<body> 

<P>(jllalJjj£ J1 jj£ jllalJljj£ </p> 

</body> 

</html> 




Ub 
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Blue.dana66@vahoo.com 

Dana.computer92@gmail.com 

www.voutube.com/computersoranu 


class 


Jj ^ ^ ^ jU Cjj uJf ^ OJJJJ ®J 

; (jLa 0^ Aj oj^j Aj Ij Aj (jj a£j L_at oj Aj yLaLjlujJj j a£ Aj 


P 

{ 

_ ^ ^ ^ 

Aj L_fll^)S ^ J ^ Aj ^ ^ 6 j Aj ^ 

^ C5-^ ^ J ^ LS J Aj (jLo AA IJ Aj (JjLoJjIj a} 

^ U:P ^JA Clui^lj (jLo Ajud^ j Aj ^^ ^ (jLo ^ 

if U^j'jW C5^ ^ 'Sf J »J Of Ly^ Ly^ ^ jlj a] L_at j^ ej Aj jJ^ 
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Css language 


^ ti Uit 

6j C5^ ^ ^ ^ ^ A£Ij j Aj Ij 6J ^joj 


^ a£ Aj 6 j 4 j Jj ^ ^jIj^ ^ jJ^ JJ'^ J'^ 



JJJ^ <j jj ^ oJ OJ j£ cijb^ jU a£ ^ C 5 ^'J^ »J ^ L$J^ ^ OHJJ 



U^ U^ ^ ‘>'^ (J ^ Aj^jj 0J J jj a£ oJ (_^jIjJ ^ ojjJ ^1 j£ 0j Aj 0jL^ ^ Aj OJ 

p.first 

{ 

Color:red; 

} 

p.second 

{ 

Color:blue; 

} 


AjjAJ ^ oJ ^ljjl£ Aj JjLajjA jlj aJ oj A_j AA ^LaSlj^ oj Aj ^J^ '‘'‘‘'J*' 

AslOJ Aj j A_i Ij Aj ^ o.1j dj^) Lf 

jjjui 0j Aj Aj A^Ij a£ ^ a£ oJ 
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Css language 


<p class = "first" > </p> 


Csi C5^ ®J ^ j Ij Ai f »J j ^ OHJJ 0*^ 

LS L)^ ^ (J^ ^ ^ ^ U:J^ C5^ ^J J ^ lS^3^ J ^ 

Aj Aj (^ j Aj Ail^)£ Aj 


<p class="second"> "'-^'j^ Jj^ </p> 


<J 


<html> 

<head> 

<style type="text/css"> 

p.first 

{ 

colorired; 

} 

p.second 
<html> 
<head> 
{ 

color:blue; 

} 

</style> 

</head> 

<body> 

<p class="first"><j'j^ </p> 
<p class="second">'Cj'j^ Jj^ </p> 

</body> 

</html> 
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\ 0\ 


id 


Aj AA (^jljl^ jl£ Aj (^jIj^ Aj AjIj ^J ^ Cj^ AjLg^ ^ Aj 

aJ UI^ ^ ^LoJjuj A -^^ Aj^ Aj 6j Aj ^ AjLo^ ^ Aj (J a£ aJ 

jj ^ ojjtjJ 0^ JJJ AA jUlaiJj^ J AA a] jjIjJ Ij Aj ^ ^ jU 

. Jj'-^ jA aIIj a] Aj jU aJ j:}%J jl£ Aj jU 


(jjj^ eJ j Aj a^l ^ Aj AjL«^ ^ Aj 


#dana 

{ 

Color:pink; 

Font-family:impact; 

} 
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Css language 



^ ^^AjIj (J^IAjLulp Aj 6AjAJ 6j 

6j ^Ljj Aj^ Aj A^ 4\y IS jj ^lS J ^ ^^U:3^ ^ 

^ ^Lojuj AjJ^ ^ 

^ ^jj j ^juj <1 0 jUI^ ^La ^Ul^ Jj a£ ^ J ^ J ^ ^ 

j'^^ ^ ^ lS J ^ J^ ^ ^J ^ dy C5^ ^ Cs^ 

L>-^ L>-^ ^ jU <i ejjJj£ yU t5 jIj:i ^ AjJjU j Aj Alx^jjj 

’ 6^1 J)Ja*jj ^ Aj 


<marquee id="dana"> </marquee> 


■ 0^ Aj ^ Ajjj aI Aj_j<aj 


<html> 

<head> 

<style type="text/css"> 

#dana 

{ 

color:pink; 

font-family:impact; 

} 

</style> 

</head> 

<body> 

<p id="dana">u^^jj^</p> 

</body> 

</html> 


! ^ 













Css language 


crW ^ ^ L$jjj oj^ ^ oj 

; <j 


<html> 

<head> 

<style type="text/css"> 

#dana 

{ 

color:pink; 

font-family:impact; 

} 

#twana 

{ 

color:yellwo; 

font-size:33px; 

} 

</style> 

</head> 

<body> 

<p id="dana">u^-^jj^</p> 
<p id="twana">u^>^jj^</p> 

</body> 

</html> 















Css language 


www.voutube.com/computersoranu 

blue.clana66@vahoo.com 

1 j ^jjj 

Ub 

\0\ 
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border 

oJ OJ dboijjJ (J <jjjj Jj j'jji Qjip QMp ^Laj <i 

^ AA LS^3^ ^ cly U^ ®^W ^ L)i 

(jj a£j ^LilLaij^J eJ a£ 

Border-Style 

Aj AA ^ U:J U^ LS^J^ ®J ^ ^ C5 

dotted 

• Aj_j<aj ^ ^ 

Border-styleidotted; 




<html> 

<head> 

<style type="text/css"> 

P 

{ 

border-style:dotted; 

} 

</style> 

</head> 

<body> 

<p>u^^jj^</p> 

</body> 

</html> 


! ^ 













Css language 


double 


I Aj 


<html> 

<head> 

<style type="text/css"> 

P 

{ 

border-style:double; 

} 

</style> 

</head> 

<body> 

<p>u^^jj^</p> 

</body> 

</html> 


<J 
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solid 

e jj ^ 


; <j 


<html> 

<head> 

<style type="text/css"> 

P 

{ 

border-style:solid; 

} 

</style> 

</head> 

<body> 

</body> 

</html> 




groove 


<html> 

<head> 

<style type="text/css"> 

P 

{ 

border-style:groove; 
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Css language 


Ul^ 


} 

</style> 

</head> 

<body> 

<p>u^^jj^</p> 

</body> 

</html> 


dashed 




<html> 

<head> 

<style type="text/css"> 

P 

{ 

border-styleidashed; 

} 

</style> 

</head> 

<body> 

<p>u^^jj^</p> 

</body> 

</html> 


<J 
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Css language 


inset 

4-jl£ ajlj^ ^ 4^ Aj 

; <J Jje^ 


<html> 

<head> 

<style type="text/css"> 

P 

{ 

border-style:inset; 

} 

</style> 

</head> 

<body> 

</body> 

</html> 


Aj 



outset 

: JJ C5^A>J Aj 


<html> 

<head> 

<style type="text/css"> 

P 
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{ 

border-style:outset; 

} 

</style> 

</head> 

<body> 

<p>u^^jj^</p> 

</body> 

</html> 






ridge 




; <j 


<html> 

<head> 

<style type="text/css"> 

P 

{ 

border-style:ridge; 

} 

</style> 
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</head> 

<body> 

<p>u^^jj^</p> 

</body> 

</html> 





hidden 

Ol£ .jljjl oj Aj ^‘ 0^ AA AjLajS ^ Aj 


\ Aj^jxj 


<html> 

<head> 

<style type="text/css"> 

P 

{ 

border-style:hidden; 

} 

</style> 

</head> 

<body> 

<p>jU*iijjj£</p> 

</body> 

</html> 
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Border-color 

^ a£j ^jIj^ lSJJJ ^^ (1)^ ^ J^ C5^ ^J J^ ^J ^ ^ L?^ 


I <j 


Border-color:blue; 




<html> 

<head> 

<style type="text/css"> 

P 

{ 

border-color:green; 

border-style:dotted; 

} 

</style> 

</head> 

<body> 

<p>jU*iijjj£</p> 

</body> 

</html> 


! ^ 
















Border-width 

ojU ^ oj Q LAjl£ ejljj] ‘>J ^ <J (_5jA <J 

: 0:3 CS-^'j'U:3j'jJ ij^J^ Ojjj 


; <j 


Border-width:20px; 




<html> 

<head> 

<style type="text/css"> 

P 

{ 

border-color:green; 

border-style:dotted; 

border-width:22px; 

} 

</style> 

</head> 

<body> 

</body> 

</html> 


















Css language 


Ul^ 



Border direction 

J\j aj aj jb CixajI j yb ^ eJ ^ a£ eJ jljj] 

i Oi 0jj a£ (_J 0jb Ai j Jj ej ybajik. (_^jjj ojb <J Ij ojijik. 


Border-left 


ajl^ Aj Aj Aj <_J A^ c5jlJ j ^ Ajba^ ^ Aj 


Border-left-color:red; 




<html> 

<head> 

<style type="text/css"> 

P 

{ 

border-left-color:red; 
border-left-style:inset; 
border-left-width :15px; 

} 

</style> 

</head> 

<body> 

<p>u^^jj^</p> 

</body> 

















</html> 



Border-right 


^jj 6jU Aj CLlojI j jIc5Aj ^ Aj 


Aj jjS^ 


Border-right-coloriblue; 


; <J 


<html> 

<head> 

<style type="text/css"> 

P 

{ 

Border-right-color:red; 

Border-right-style:inset; 

Border-right-width:15px; 

} 

</style> 

</head> 

<body> 

<p>u^^jj^</p> 

</body> 

</html> 
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Border-top 

lSjjj ^^ lS cl)^ 3^ ^ ^ ^ 

: jUj^ 


I <j 


Border-top-width:20px; 




<html> 

<head> 

<style type="text/css"> 

P 

{ 

Border-top-color:red; 

Border-top-style:inset; 

Border-top-width:15px; 

} 

</style> 

</head> 

<body> 

<p>jU*iijjj£</p> 

</body> 

</html> 


















Border-bottom 


(jj a£j dluijjJ oj 0^1 ^ jjI (jLa_^ AjLa^ ^ <j (_^JA Aj 


O'j^ ^ 


Border-bottom-style:dotted; 


; <J 


<html> 

<head> 

<style type="text/css"> 

P 

{ 

Border-bottom-colorired; 
Border-bottom-style:inset; 
Border-bottom-width :15px; 

} 

</style> 

</head> 

<body> 

<p>u^^jj^</p> 

</body> 

</html> 


! ^ 


















J til Aj jxj 

<html> 

<head> 

<style type="text/css"> 

P 

{ 

Border-bottom-colorired; 
Border-bottom-styleiinset; 
Border-bottom-width :15px; 
Border-top-color:blue; 
Border-top-style:groove; 
Border-top-width:15px; 

Border-left-color:gray; 

Border-left-style:outset; 

Border-left-color:yellow; 

Border-left-width:15px; 

Border-right-color:pink; 

Border-right-style:dashed; 

Border-right-width:15px; 

} 

</style> 

</head> 

<body> 

<p>u^^jj^</p> 

</body> 

</html> 


! ^ 














Css language 


Ul^ 


i 


Border in line 

oj ^ ^ ^ 'SJ Cji <-—LuijjJ ^1 jj Ia oj j AA aj 

^ a£ aj iS J"^ Ui 


a jlj^ ^ 


Border:3px dashed green; 




<html> 

<head> 

<style type="text/css"> 

P 

{ 

Border:3px dashed green; 

} 

</style> 

</head> 

<body> 

<p>u^^jj^</p> 

</body> 

</html> 


aL^ Aj 
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Css language 


padding 

j Aj jj^ AA j j ^ (jl^ ^ L?^ 

^\ jJ ^ajoj ^ ^ Aj ^ J cly lSJ^^ ^ ^ L? 

^LSJJJ ^ ^ 6jU^ ^ ^ LS J Aj (J a£ aJ jj j Aj (^I^j 

I 

t >J AjLg^ j Aj ^JA Aj (jIj^Ij ^ lSJ^ J ^ ^J c^ljnxAijj Cluj ^j-o 

^ a£j ^jIj^ ^lSJJJ ^ lS ^ J^ J ^ U^J^ j jj 6^ 

; <j jj^ 


{ 

Border:2px solid green; 
Padding:20px; 

} 
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Css language 


Ul^ 


<html> 

<head> 

<style type="text/css"> 

P 

{ 

border:2px solid green; 
padding:20px; 

} 

</style> 

</head> 

<body> 

<P>(j^ ^Ij eJj Aj Ij AA </p> 

</body> 

</html> 


<J 





<html> 

<head> 

<style type="text/css"> 

P 

{ 

border:2px solid green; 

padding:2px; 

} 

</style> 
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Css language 


Ul^ 


</head> 

<body> 

<p>j^ f'j </p> 


</body> 

</html> 






jyj (•'■j *o “W1? ''-4^ 




Padding-left 


Aj (jj A^ (jjjljJ 


; <j 


p 

{ 

Border:2px solid gray; 
Padding-left:20px; 

} 


Padding-right 




I Aj 


p 

{ 

Border:2px solid gray; 
Padding-right:20px; 

} 
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Padding-top 

I ^ aSiJ oj ej 4_u) j ''--a (j^tjJ oJ Ia oj J ^ oj 




P 

{ 

Border:2px solid gray; 
Padding-top:20px; 

} 


Padding-bottom 


(jj aSj (jLaJ^ JJj ^ jJ oJ Ia oj J '^A oj 


I Aj 


P 

{ 

Border:2px solid gray; 
Padding-bottom:20px; 

} 


; <j 


<html> 

<head> 

<style type="text/css"> 

p.a 

{ 

border:2px solid gray; 
padding-left:20px; 

} 
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Css language 


Ul^ 


p.b 

{ 

border:2px solid green; 
padding-right:20px; 

} 

p.c 

{ 

border:2px solid blue; 
padding-top:20px; 

} 

p.d 

{ 

border:2px solid yellow; 
padding-bottom:20px; 

} 

</style> 

</head> 

<body> 

<p class="a">u:?j f'j ^ ^ </p> 

<P ClaSS="b">U:}J U </p> 

<P ClaSS="c">U:}J ^'j U ^ </p> 
<p class="d">u:}j f'j ^ W </p> 

</body> 

</html> 
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Css language 


Ul^ 



Blue.dana66@vahoo.com 

Dana.computer92@gmail.com 

www.voutube.com/computersoranu 


margin 


<1 ^La 4-Uj ‘ ^ ^ ^ jJ Jj <—u.ijl£ Aj AjLa^ ^ Aj 

Ij AA j Ajjj j oj Aj jj£ oj Aj (J^ ^ ^ aJ a£ Ajl£lj j Aj (J a£ 

csrj'j'^ 
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(J aJ ^joieJ A^ ^ Aj-ijui^ j Aj (3^ 3^ 

^ a£j ^3^ lSJjJ) ^ ^ ^ AjjLui 4-yj 


Aj^jxj 


<html> 

<head> 

<style type="text/css"> 

P 

{ 

Border:3px dashed green; 

margin:20px; 

} 

</style> 

</head> 

<body> 

<p>u^^jj^</p> 


</body> 

</html> 




' ^ 

^ < m • ■<-• f f n-,,f 


— ^ - -- 





di A^ ^ Aj (j LaJ^ij^ A^ ^ J ^ ^ 


Margin-direction 


cs^ (J j'J a1 a] JjLxjjA ^ l£ AjI^% 

CJ^ ^ CJ^ J LS^ ^ U:3 LSCj^ ^ AjjLoj 


O'j^ ^ 
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Css language 


Margin-left:20px; 


Margin-left 


L-J a1 ^ a£j ^ Aj (^3^ ^ 

; <j jj^ 


<html> 

<head> 

<style type="text/css"> 

P 

{ 

Border:3px dashed green; 
margin-left:20px; 

} 

</style> 

</head> 

<body> 

<p>u^^jj^</p> 

</body> 

</html> 




-w I 


Margin-top 


^ a£j Ajj^ ^ ^ J ^ 
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<html> 

<head> 

<style type="text/css"> 

P 

{ 

Border:3px dashed green; 
margin-top:20px; 

} 

</style> 

</head> 

<body> 

<p>u^^jj^</p> 


</body> 

</html> 


' ^ 


1 V nviy /ozuvv ur lu/ ueiMU|j/ i li mi 



1 






Margin-right 




<html> 

<head> 

<style type="text/css"> 

P 
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Margin-bottom 


■ ^ J ^ cly CIluj 1^j ^ (j^ljJ 6j ^ Aj ^JA ^ 


; <j 


<html> 

<head> 

<style type="text/css"> 

P 

{ 

Border:3px dashed green; 
margin-bottom:20px; 

} 

</style> 

</head> 

<body> 

<p>jU*iijjj£</p> 
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Css language 





L-^ J L-^ ^ ^ ^ ^ C5^3^ 

www.voutube.com/computersoranu 


^.u) j ^ lB Cllu) jJ oJ oj 4jLa j ^ Aj JA 4j 

. OJ ^ U^ OH'j^ »J U^'J 

List-style-type 
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AJti ^Clj jI(jIj Ij Aj ^ a£ CLloj jj^ cil^l£ 

. 0^%? U^j'^ a£ Aj 

Upper-roman 


^l£ djU Jj j L_al Aj ^ 6 ^ ^ C5^^ ^^3^ ^ Aj ^ ^ 

ciiLk ^U^j J c1jI£ ^ 

: O'j^ r' 


List-style-type:upper-roman; 


; <J 


<html> 

<head> 

<style type="text/css"> 

ol 

{ 

list-style-type:upper-roman; 

} 

</style> 
</head> 
<body> 
<ol> 
<li>Ub</|i> 
<li>lj| jj</li> 

</ol> 

</body> 

</html> 


! ^ 















I. ULj 

II. 


circle 


j cljLk oJ ®^ U^ AjjjoJ a£> Aiuul <1 oj^ (jj A^ <j 

dil^ oJ ^ ojlj 




List-style-type:circle; 




<html> 

<head> 

<style type="text/css"> 

ul 

{ 

list-style-type:circle; 

} 

</style> 

</head> 

<body> 

<ul> 

<li>Ub</|i> 

<li>Uljj</|i> 

</ul> 

</body> 

</html> 


79 

















o Ulj 
o Uljj 


List-style-image 


ftjU AjI j a£j ciiujjj^ ^l£ AlLoiJ ^^ lS ^j ^ ^ ^ Aj 

6j 6j Ajoj ^ AjIj Aj ^ (J a£ aJ ^ J J ^ ^ C1jI£j ^ Aj 


O'j^ ^ <j 


List-style-image:url( ojjj ojb oj^ a£ ajjj ^ 5 ^); 




<html> 

<head> 

<style type="text/css"> 

ul 

{ 

list-style-image:url(http://a 6 .sphotos.ak.fbcdn.net/hphotos-ak- 

snc7/578155_116644348476527_1909924797_n.jpg); 

} 

</style> 
</head> 
<body> 
<ul> 
<li>Ub</li> 
<li>UI jj</li> 
</ul> 
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Css language 


Ul^ 


</body> 

</html> 





List -style-position 


6j Aj^ Aj ^Lajl£ AlLoiJ AjI j ^ a£j ^jU^ ^ Lajl£ AlLoiJ jj 

Outside 

AjI j 6j Ajoj ^ U:3 (J^ ^ AlLoiJ a] Ij jj 6j AjLo^ ^ Aj ^JA Aj 

I 6^1 j) U*JJ ^ Aj _ C* 1 JJ 6 J AjuJ A1 ^ A^ A-lj^^JOJ 


List-style-position:outside; 


Inside 


















Css language 


6jIj ^J ^ Cj^ ^ AlLudil C1 jI£ Ij AjLg^ ^ Aj 

4jaJ (J A£ <1 <J <J 6j 

: O'^ 


List-style-position :outside; 


I 6 J ^ ^ Aj 

\ <J 


<html> 

<head> 

<style type="text/css"> 

ol 

{ 

list-style-type:upper-roman; 

list-style-position:inside; 

} 

ul 

{ 

list-style-type:circle; 

list-style-position:outside; 

} 

</style> 
</head> 
<body> 
<ol> 
<li>Ub</li> 
<li>lj| jj</li> 

</ol> 

<ul> 

<li>Ub</|i> 

<li>ljljj</|i> 
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Css language 


Ul^ 


</ul> 

</body> 

</html> 




I. 

II. IjljM 

o Uki 
o Uljj 


Blue.dana66@vahoo.com 

Dana.computer92@gmail.com 

www.voutube.com/computersoranu 




Ub 
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table 


oj ^ o^tj ^ 'CLjI^ U"*^ L)"'^ LS^ CS^^-3 ^ 

: 03 '^J J 03 Ijj-i^ 03 Oj'j^ ^ 


^ a£ oJ 0jl£ ^ 


^ ^ r 


<html> 

<head> 

<style type="text/css"> 
table,th,td 
{ 

border:2px dotted gray; 

} 

</style> 

</head> 

<body> 

<table> 
<th>j'j</th> 
<th>u ^</th> 
<tr> 

<td>lj'x/td> 
<td>'^ ‘</td> 
</tr> 
</table> 
</body> 
</html> 


! ^ 












Css language 


Ul^ 




iUlj 

' ! 


<html> 

<head> 

<style type="text/css"> 
table,th,td 
{ 

border:2px dotted gray; 

width:30px; 

height:33px; 

} 

</style> 

</head> 

<body> 

<table> 
<th>j'j</th> 
<th>u ^</th> 
<tr> 

<td>lj'x/td> 
<td>'^ ‘</td> 
</tr> 
</table> 
</body> 
</html> 


! ^ 
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Ul^ 


\M 

: ^: 

iUbi 

■ ■ ■ ■ ■ I 
!■■■■■■ 

h 

■ ■ ■ ■ ■ I 


AluiljU jj oJ oJ 4^ 4,‘i<,u-s jU <1 j Aj jj oJ Ia oj j AA oj 

: jUj^ cijjj ®03 ci 


; AjjAj 


<html> 

<head> 

<style type="text/css"> 
table,th,td 
{ 

border:2px dotted gray; 

width:300px; 

height:33px; 

text-align:center; 

} 

</style> 

</head> 

<body> 

<table> 
<th>j'-j</th> 
<th>u "^</th> 
<tr> 

<td>^'-^</td> 
<td>^ *</td> 
</tr> 
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Ul^ 


</table> 

</body> 

</html> 




jU 



Ulj 




AJjol^ cillj Aj ^ <£j L-^ jJ IA 6jj AA 6j 


; <j 


<html> 

<head> 

<style type="text/css"> 
table,th,td 
{ 

border:2px dotted gray; 

width:300px; 

height:33px; 

text-align:center; 

background-coloriblue; 

} 

</style> 

</head> 

<body> 

<table> 

<th>j'-j</th> 
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Ul^ 


<th>u <j</th> 
<tr> 

<td>lj'x/td> 
<td>^ *</td> 
</tr> 
</table> 
</body> 
</html> 





U'Ji^ CiJ^'j 
\ 

Blue.dana66@vahoo.com 

Dana.computer92@gmail.com 

www.voutube.com/computersoranu 
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content 


AjLo^ ^ Aj ^JA <j ^j^Ijj 6j (j^L-^\Ji. Ji Cljjj <jL<ij j a£ Aj Aj^Jj C1ij^jI£ 
^IjJ£ <S jU U e j ^ a] jL dJJ^jl^ Aj jlj^jjJ Aj ej jJ a£j j^ljjjU 


hpfnrp 


^31 ^ ^ lS ^ ^ ^ ^ Aj ^3 ^ ^ 


p. before 

{ 

Content:" Ai*i£^ j aj ejJ"; 

} 


I Aj 


<html> 

<head> 

<style type="text/css"> 
p: before 
{ 

content:"u^'^jj^"; 

} 

</style> 

</head> 

<body> 

<p>j^U</p> 

</body> 

_ </html> 

!!! Cjj a£j ^3^ lS ^^JJ U 




















after 


CliL Aj AjLg Ajjjoj^ j Aj (J^I^ Aj ^^ ^ Ia 6jj AA 6j 

: isPj^ 

: O'j^ ^ 


P: after 

{ 

Content:"-ijj^"; 

} 


; <j 


<html> 

<head> 

<style type="text/css"> 
p: after 
{ 

content:"u^'^jj^"; 

} 

</style> 

</head> 

<body> 

<p>j^U</p> 

</body> 

</html> 
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active 


Aj J ^ J ^ j a£ Aj a£ ^ a£j Ij jj 6^ 6j ^ Aj ^JA Aj 

OJjJ^ (J »J 03 'j 'j 

; <J Jje^ 


<html> 

<head> 

<style type="text/css"> 
a:active 

{color:green;font-size:33px;} 

</style> 

</head> 

<body> 

<a href="http://www.google.com/">google</a> 

</body> 

</html> 


oj jj <jjo Jj cliJ^j£ oJ a5o 0 j I j Aj y 4.^ J 'd J <£ <J 

oJ (JJ A.£ 4Jijj3 ojIj 4.9 Ia ojj 


hover 


J Ajjo (jLujojLa J dy Ij 0:^1 ®J AjLajS ^ 4 j (_^JA 4j 

! lS 4.^ oj U:3^l AjjjoIj 
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<html> 

<head> 

<style type="text/css"> 
a:hover 

{color:green;font-size:33px;} 

</style> 

</head> 

<body> 

<a href="http://www.google.com/">google</a> 

</body> 

</html> 


Css grouping 

^ ^Lui (jCa AA aj (jj aj Aj Aj .ij A^ Aajj 

: O'j^ f 



^ AA J ®J ^ (jLalLii ^_g-u) oJ til oj 

/'tlAluJ 
** ** 

; Ajjaj 
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<html> 

<head> 

<style type="text/css"> 

p,a,hr 

{ 

color:blue; 

background-coloriblack; 

} 

</style> 
</head> 
<body> 
<p>u^^jj^</p> 
<a href="http://www.google.com/">google</a> 

<hr> 

</body> 

</html> 



Blue.dana66@yahoo.com 

Dana.computer92@gmail.com 
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Display 


^ J lS j'J^ op'^J ^ lS> 

^l£ jj aj ^ aj ch A^\^ 


none 


6j AjjjLoj AjIj ^jnjj ^l£ AIL^ ^j^ljj 4J a£ C1jI£ Ij ^ Aj 


6^1 J) U*JJ ^ Aj 


Display:none; 




<html> 

<head> 

<style type="text/css"> 

P 

{ 

displaymone; 

} 

</style> 

</head> 

<body> 

<p>u^^jj^</p> 

</body> 

</html> 

















Clu 0 jIj^ Aj d AjJ 9 ^ d 9 

**--/ ^ ** • ** ^ ** **-/ -/ 


inline 


1^ ^Ljo^ cJJ^ ^ ^ ^ (jLajl£ 4ijj _5_j<a c1jI£ oJ t_j ^ 4 j 




Displayiinline; 


I Aj 


<html> 

<head> 

<style type="text/css"> 

P 

{ 

displayiinline; 

} 

</style> 

</head> 

<body> 

<p>u^^jj^</p> 

<p>jjj£</p> 

</body> 
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</html> 






Aj 4JA^ 
) Aj 


<html> 

<head> 

<style type="text/css"> 

P 

{ 

text-align:center; 

color:blue; 

background-coloriyellow; 

} 

body 

{ 

background-coloriblack; 
border:4px inset red; 

} 

</style> 

</head> 

<body> 

<hr> 


96 














Css language 


Ul^ 


<p class="a">f </p> 


<hr> 

</body> 

</html> 



y AjjAj 


<html> 

<head> 

<style type="text/css"> 


p.a 

{ 

text-align:center; 

color:blue; 

background-color:yellow; 
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p.b 

{ 

text-align:center; 

colorired; 

} 

p.bihover 

{ 

color:blue; 

} 

body 

{ 

background-coloriblack; 
border:4px inset red; 

} 

</style> 

</head> 

<body> 

<hr> 

<p class="a">f» ejjj </p> 

<p class="b">tij ^ 4?^ </p> 

<hr> 

</body> 

</html> 
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Ul^ 



Blue.dana66@vahoo.com 

Dana.computer92@gmail.com 

www.voutube.com/computersoranu 
















Css language 



<J jj J^ ^ ^ Aj j£ 4jVu*ro ^ 

^ <jIj <jIj ^ <1 clli <J (jIj^ Aj 4,AAaj^ ^ jl^l J j Clbudjl J ^6j^ ^ (^5-^ 

^ <JJJ-<^ Ij Aj 1^ ^ ^ (J^W a£ <jIj j AJ^ ^L)^W ^ <1 a£ 

AjIa^jjAa^j elm jjL^ J Aj <1 (jl^l^ lS ^ J ^ ^ (J a£ <1 

^jljle ^ ^Lojuml£ Aj 


<1 c^\ju*jj j AA a 1 ^Ij a£ Aj ^Ij (JjjLj ^ e*ijj AA (jL^ Aj j ^ ^ AA j a£ Aj 6j 

^ 6j aj ^ 6j aj a£j ^ a£ aj ^ (JL^juj6j ujj^ cj^^ j4^ ^J ^ ^ ^ 

6j Am Aj AjV AA ^ Aj jjjIaI^ A-^ AA j Aj aJ 


ClbaiJj Aj^ j 6(j^ ^^44^ ^ ^ ^ ^ ^3^ Jj3 ^J 

^liij] Aj 6j 4^ ^ ^ ^ ^ U^ AjuIj^ lS ^j ^ 3^ ^lliLoj J Aj A-^ ^ A. i ^ j ^ a£j d^Lclj 

AA J Aj j£] Aj ^ej^lLojjje 4-yj lS ^jW ^ ^ AA j Aj I j^ A^ Aj a£ ^ ^ 

jL^C5^^ C5 tH ^ ^ ^ ^ fteLclj ^ ^IjjaJ^ 


djljjjam J Aj^ Aj Aj AA j AA ^ IajIj^^ aJ 

AjULum jU ^ Aj Jj (j (J^^ 

IjI^I j Ajojj^ 

jljjx^ ; J^lJ 

TOY ^jU: Ju. 


Blue.dana66@vahoo.com 

Dana.computer92@gmail.com 

Facebook.com/2292.hard.way 















